<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../static/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../sass/header.css">
    <link rel="stylesheet" href="../sass/footer.css">
    <link rel="stylesheet" href="../sass/productDetails.css">
</head>

<body>
    <!-- 公共头 -->
    <div class="header-common"></div>

    <div class="header-nav">
        <ul class="nav container">
            <li class="active" onclick="toIndex()">首页</li>
            <!-- <li>9块9包邮</li>
            <li>超值大额点券</li>
            <li>降温急救穿搭</li> -->
        </ul>
    </div>

    <!-- 商品详情介绍 -->
    <div class="pro_details container">
        <div class="pro_content">
            <div class="goods_details">
                <!-- 轮播 -->
                <div class="bigGra">
                    <div class="grass"></div>
                    <div class="bigGrass">
                        <img class="bigIng_src" src="" alt="商品图">
                    </div>
                    <!-- 轮播插件 -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper"></div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <!-- 商品详细描述 -->
                <div class="goods2">
                    <div class="goods_desc">
                        <div class="title_icons">
                            <img class="plot_img" src="../static/image/淘宝.png" alt="平台">
                            <img class="baoYou_img" src="../static/image/包邮.png" alt="包邮？">
                        </div>
                        <span class="goods_title"></span>
                    </div>
                    <div class="goods_price">

                    </div>
                    <span class="goods_time">优惠有效期：</span>
                    <div class="icon_box">
                        <div class="cart_icon">
                            <span class="iconfont icon-gouwudai"></span>
                            <span class="cart_text">去购物车</span>
                        </div>
                        <div class="tocart"></span>加入购物车</div>
                    </div>
                </div>
            </div>

            <!-- 商家 -->
            <div class="goods_shop">
                <div class="shop_header">
                    <div class="line"></div>
                    <div class="text">卖家信息</div>
                    <div class="line"></div>
                </div>
                <img class="shopLogo" src="" alt="商家图片">
                <h3 class="shop_name"></h3>
                <ul class="shop_desc">
                    <li>
                        <p>描述</p>
                        <span></span>
                    </li>
                    <li>
                        <p>服务</p>
                        <span></span>
                    </li>
                    <li>
                        <p>物流</p>
                        <span></span>
                    </li>
                </ul>

            </div>
        </div>
        <div class="pro_products container"></div>
    </div>

    <!-- 返回顶部 -->
 <img  class="toTop" src="../static/image/返回顶部.png" alt="">

    <!-- 公共脚 -->
    <div class="footer-common"></div>


    <script src="../js/template-web.js"></script>
    <script src="../js/jQuery3.6.0.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/productDetails.js"></script>

    <script type="text/html" id="good_swiper">
            <div class="swiper-wrapper">
                {{each goods}}
                <div class="swiper-slide">
                    <img src="{$value.url}}" alt="商品图">
                </div>
                {{/each}}
                
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
    </script>
</body>

</html>